<template>
  <el-form class="elForm" :model="information" ref="information" :class="isEdit?'':'formItem'">
    <el-card class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">车辆信息</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车架号:" style="width: 100%;">
            <span>{{ information.vinNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车牌号:">
            <span>{{ information.carNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="品牌/车系/车型:">
            <span>
              {{
                `${information.brandName}${information.seriesName ? '/' + information.seriesName :
                    ''}${information.modelName ? '/' + information.modelName : ''}`
              }}
            </span>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车辆归属:">
            <span>{{ information.ascription }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车辆订单:">
            <span>{{ information.orderNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="租赁台数:">
            <span>{{ information.leaseNum }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="客户名称:">
            <span>{{ information.customerName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="租赁合同日期:">
            <span>{{ information.leaseStartTime + '~' + information.leaseEndTime }}</span>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8" v-if="isShow">-->
        <!--          <el-form-item label="总预算费用:">-->
        <!--            <span>{{ information.totalBudgetPrice }}</span>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车辆行驶里程:" :label-width="labelWidth" style="width: 70%;" prop="travelMeligile"
                        :rules="isEdit ? rules.travelMeligile : []">
            <el-input v-if="isEdit" @change="handleChange('travelMeligile')" v-model="information.travelMeligile"
                      placeholder="请输入车辆行驶里程" maxlength="7"/>
            <span v-else>{{ information.travelMeligile }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="注册日期:">
            <span>{{ information.registerTime }}</span>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8" v-if="isShow">-->
        <!--          <el-form-item label="单车预算费用:">-->
        <!--            <span>{{ information.bicycleBudgetPrice }}</span>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>

      <!--      <el-row :gutter="24">-->
      <!--        <el-col :span="8" v-if="isShow">-->
      <!--          <el-form-item label="已维修成本:">-->
      <!--            <span>{{ information.replacePrice }}</span>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8" v-if="isShow">-->
      <!--          <el-form-item label="单车剩余预估费用:">-->
      <!--            <span>{{ information.carSurplusPrice }}</span>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "repairBasiceInfo",

  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isShow: true,
      rules: {
        travelMeligile: [
          {required: true, message: "请输入公里数", trigger: "blur"},
        ],
      },
    };
  },
  computed: {
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
    labelWidth() {
      if (this.isEdit) {
        return "110px";
      } else {
        return "";
      }
    },
    information: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleChange(str) {
      let msg =  /^[1-9]\d*$/;
      if (!msg.test(this.information[str])) {
        this.information[str] = "";
      } else {
        this.information[str] = this.information[str]
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.information.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            this.locateToErr();
            reject();
          }
        });
      });
    },
    locateToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName("is-error");
        isError[0].scrollIntoView({
          // 滚动到指定节点
          // 值有start,center,end，nearest，当前显示在视图区域中间
          block: "center",
          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
          behavior: "smooth",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";
</style>
